Web電車なう
毎度お世話になっております。クラスメソッドの稲毛です。
今回は、jQuery Mobileアプリケーションを習作する中で得た情報や雑感を紹介したいと思います。
作成したのは、弊社提供中のAndroidアプリケーション『電車なう』をjQuery Mobile Frameworkを利用したWebアプリケーションへ移植したものです。本Webアプリケーションは習作ということでお気に入りの登録などオミットした点もあります。Android端末を利用されている方は是非アプリ版も利用してみてください。^^;
Web電車なうを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
HTMLに関して
jQuery Mobileのリスト描画には「入れ子リスト（Nested list）」というものがあります。
<ul data-role="listview">
<li>JR
<ul>
<li>山手線</li>
<li>京浜東北線</li>
<li>総武線</li>
：
</ul>
</li>
<li>東京メトロ
：
</ul>
階層的に鉄道会社と路線を記述することで、起動時にjQuery Mobileによって鉄道会社ページとそれぞれの路線ページが自動的に生成されます。自然に階層構造が記述できるので当初は利用していたのですが、生成されるページにはデフォルトテーマが適用されており、HTMLからdata-themeを指定できないようだったので地道にページを作成することにしました。他にも、同構造のリストでページで実現したものと入れ子リストで実現したものを比較すると、入れ子リストの方が僅かながら起動に時間が掛かったようでした。起動時に、新たにHTML要素を生成するDOM操作を行なっていることが影響しているのかもしれません。だとするとリスト項目数が多くなると顕著になる可能性があるので別途ベンチマークを測ってみるのも面白いかなと思っています。
JavaScriptに関して
実を言うとClosure Libraryを用いたJavaScriptコード以外はほぼ書いたことが無かったので勝手がわからずに苦慮しました。ただjQueryの$関数で返されるDOMオブジェクトの扱いに慣れてくると、これはこれで小気味良い実装が出来るものだなと感じました。
CSSに関して
テーマのカスタマイズについては「ThemeRoller」を利用しました。視覚的にテーマをカスタマイズ出来るのでとても便利でした。今回はWordPressの機能でアプリを配置しているのでデフォルトテーマを上書きする形式になっています。
まとめ
ページ遷移などの動作に関しては、「もう少し速ければな……」と思う所もあります。実案件での利用では、高速化に関するノウハウの蓄積が必要だと感じます。しかしながら、わずかな記法の習得で容易にWebベースのモバイルアプリケーションが作成できることは素晴らしいと思います。なによりもデバイス依存をjQuery Mobileにお任せできることが良いですね。jQuery MobileベースでWebKitに特化することで最適化を図った「jQ.Mobi」というプロダクトもリリースされているので今後もこの分野は注目してきたいと思います。
